<template>
    <el-container>
        <el-header></el-header>
        <el-main>
            <<el-table :data="templateList" border stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" width="50" />
                <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label"
                    :width="col.width">
                </el-table-column>
                </el-table>

        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "TemplateList",
    data() {
        return {
            templateList: [],
            columns: [
                { id: 'id', label: 'ID', width: '80' },
                { id: 'name', label: '模板名称', width: '180' },
                { id: 'type', label: '模板类型', width: '120' },
                { id: 'description', label: '描述', width: '300' },
                { id: 'createdAt', label: '创建时间', width: '180' },
            ],
            selectedTemplates: []
        };
    },
    methods: {
        fetchTemplateList() {
            // 模拟获取模板列表数据
            this.templateList = [
                { id: 1, name: '模板A', type: '类型1', description: '这是模板A的描述', createdAt: '2023-10-01' },
                { id: 2, name: '模板B', type: '类型2', description: '这是模板B的描述', createdAt: '2023-10-05' },
                { id: 3, name: '模板C', type: '类型1', description: '这是模板C的描述', createdAt: '2023-10-10' },
            ];
        },
        handleSelectionChange(selection) {
            this.selectedTemplates = selection;
        }
    },
    mounted() {
        this.fetchTemplateList();
    }
};
</script>
<style scoped></style>